<template>
  <div class="checkin-page">
    <el-row :gutter="20">
      <!-- 签到规则配置 -->
      <el-col :xs="24" :lg="8">
        <el-card>
          <template #header>
            <div class="card-header">
              <span class="title">✅ 签到规则</span>
              <el-button type="primary" size="small" @click="handleSaveRules">
                <el-icon><Select /></el-icon>
                保存
              </el-button>
            </div>
          </template>

          <el-form label-width="120px">
            <el-form-item label="每日签到积分">
              <el-input-number v-model="rules.dailyPoints" :min="1" :max="100" />
            </el-form-item>

            <el-form-item label="连续签到奖励">
              <div class="continuous-rewards">
                <div v-for="(reward, index) in rules.continuousRewards" :key="index" class="reward-item">
                  <span>连续{{ reward.days }}天</span>
                  <el-input-number v-model="reward.points" :min="0" size="small" />
                  <span>积分</span>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="补签卡设置">
              <el-switch v-model="rules.allowMakeup" />
              <div class="form-tip">是否允许使用补签卡</div>
            </el-form-item>

            <el-form-item label="补签卡积分" v-if="rules.allowMakeup">
              <el-input-number v-model="rules.makeupCost" :min="0" />
              <span style="margin-left: 10px;">积分/次</span>
            </el-form-item>

            <el-form-item label="月度签到奖励">
              <el-input-number v-model="rules.monthlyReward" :min="0" />
              <span style="margin-left: 10px;">积分</span>
              <div class="form-tip">每月签到满{{ rules.monthlyRequire }}天获得</div>
            </el-form-item>

            <el-form-item label="满勤要求">
              <el-input-number v-model="rules.monthlyRequire" :min="20" :max="31" />
              <span style="margin-left: 10px;">天</span>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 签到统计 -->
      <el-col :xs="24" :lg="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <span class="title">📊 签到统计</span>
              <el-date-picker
                v-model="selectedMonth"
                type="month"
                placeholder="选择月份"
                value-format="YYYY-MM"
                size="small"
              />
            </div>
          </template>

          <el-row :gutter="20" class="stat-cards">
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-label">今日签到</div>
                <div class="stat-value">{{ todayCheckin }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-label">本月签到</div>
                <div class="stat-value">{{ monthCheckin }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-label">连续签到</div>
                <div class="stat-value highlight">{{ continuousCheckin }}</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-card">
                <div class="stat-label">累计签到</div>
                <div class="stat-value">{{ totalCheckin }}</div>
              </div>
            </el-col>
          </el-row>

          <!-- 签到日历 -->
          <div class="checkin-calendar">
            <h4>本月签到情况</h4>
            <div class="calendar-grid">
              <div 
                v-for="day in calendarDays" 
                :key="day.date"
                class="calendar-day"
                :class="{
                  'checked': day.checked,
                  'today': day.isToday,
                  'disabled': day.disabled
                }"
              >
                <div class="day-number">{{ day.day }}</div>
                <div class="day-status">
                  <el-icon v-if="day.checked" color="#67c23a"><Select /></el-icon>
                </div>
              </div>
            </div>
          </div>

          <!-- 签到排行榜 -->
          <div class="checkin-ranking">
            <h4>本月签到排行榜 TOP 10</h4>
            <el-table :data="checkinRanking" stripe>
              <el-table-column type="index" label="排名" width="60">
                <template #default="{ $index }">
                  <el-tag v-if="$index < 3" :type="getRankTag($index)" size="small">
                    {{ $index + 1 }}
                  </el-tag>
                  <span v-else>{{ $index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="memberName" label="会员姓名" width="150" />
              <el-table-column prop="phone" label="手机号" width="130" />
              <el-table-column prop="checkinDays" label="签到天数" width="100">
                <template #default="{ row }">
                  <el-tag>{{ row.checkinDays }}天</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="continuousDays" label="连续天数" width="100">
                <template #default="{ row }">
                  <el-tag type="warning">{{ row.continuousDays }}天</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="totalPoints" label="获得积分" width="100">
                <template #default="{ row }">
                  <span style="color: #f56c6c; font-weight: bold;">{{ row.totalPoints }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 签到记录 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>📋 签到记录</span>
          <el-form :inline="true">
            <el-form-item label="会员">
              <el-input v-model="searchForm.memberName" placeholder="会员姓名" clearable size="small" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>

      <el-table :data="checkinRecords" border stripe>
        <el-table-column prop="memberName" label="会员姓名" width="150" />
        <el-table-column prop="phone" label="手机号" width="130" />
        <el-table-column prop="level" label="等级" width="120">
          <template #default="{ row }">
            <el-tag size="small">{{ row.level }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="checkinDate" label="签到日期" width="120" />
        <el-table-column prop="checkinTime" label="签到时间" width="100" />
        <el-table-column prop="continuousDays" label="连续天数" width="100">
          <template #default="{ row }">
            <el-tag type="warning">{{ row.continuousDays }}天</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="points" label="获得积分" width="100">
          <template #default="{ row }">
            <el-tag type="danger">+{{ row.points }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="device" label="签到设备" width="120" />
        <el-table-column prop="ip" label="IP地址" />
      </el-table>

      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; justify-content: flex-end;"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Select } from '@element-plus/icons-vue'

// 签到规则
const rules = reactive({
  dailyPoints: 5,
  continuousRewards: [
    { days: 7, points: 20 },
    { days: 15, points: 50 },
    { days: 30, points: 200 }
  ],
  allowMakeup: true,
  makeupCost: 100,
  monthlyReward: 500,
  monthlyRequire: 25
})

// 统计数据
const todayCheckin = ref(2345)
const monthCheckin = ref(8956)
const continuousCheckin = ref(7)
const totalCheckin = ref(156789)

// 日历数据
const selectedMonth = ref('2024-01')
const calendarDays = ref([])

// 生成日历数据
const generateCalendar = () => {
  const days = []
  const today = new Date()
  const currentDay = today.getDate()
  
  for (let i = 1; i <= 31; i++) {
    days.push({
      date: `2024-01-${i.toString().padStart(2, '0')}`,
      day: i,
      checked: i <= 20, // 前20天已签到
      isToday: i === currentDay,
      disabled: i > currentDay
    })
  }
  calendarDays.value = days
}

generateCalendar()

// 签到排行榜
const checkinRanking = ref([
  { memberName: '张三', phone: '13800138001', checkinDays: 25, continuousDays: 25, totalPoints: 165 },
  { memberName: '李四', phone: '13800138002', checkinDays: 23, continuousDays: 15, totalPoints: 145 },
  { memberName: '王五', phone: '13800138003', checkinDays: 22, continuousDays: 22, totalPoints: 130 },
  { memberName: '赵六', phone: '13800138004', checkinDays: 20, continuousDays: 10, totalPoints: 120 },
  { memberName: '钱七', phone: '13800138005', checkinDays: 18, continuousDays: 18, totalPoints: 108 }
])

// 签到记录
const searchForm = reactive({
  memberName: ''
})

const checkinRecords = ref([
  { memberName: '张三', phone: '13800138001', level: '钻石会员', checkinDate: '2024-01-20', checkinTime: '09:30', continuousDays: 25, points: 5, device: 'iPhone', ip: '192.168.1.100' },
  { memberName: '李四', phone: '13800138002', level: '金卡会员', checkinDate: '2024-01-20', checkinTime: '10:15', continuousDays: 15, points: 5, device: 'Android', ip: '192.168.1.101' },
  { memberName: '王五', phone: '13800138003', level: '银卡会员', checkinDate: '2024-01-20', checkinTime: '14:20', continuousDays: 22, points: 5, device: 'Web', ip: '192.168.1.102' }
])

const pagination = reactive({
  page: 1,
  size: 10,
  total: 3
})

const getRankTag = (index) => {
  const tags = ['danger', 'warning', 'success']
  return tags[index] || 'info'
}

const handleSaveRules = () => {
  ElMessage.success('签到规则保存成功')
}

const handleSearch = () => {
  ElMessage.success('查询成功')
}
</script>

<style scoped>
.checkin-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.continuous-rewards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

.stat-cards {
  margin-bottom: 30px;
}

.stat-card {
  padding: 20px;
  background: white;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
}

.stat-value.highlight {
  color: #f56c6c;
}

.checkin-calendar,
.checkin-ranking {
  margin-top: 30px;
}

.checkin-calendar h4,
.checkin-ranking h4 {
  margin: 0 0 15px 0;
  color: #303133;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.calendar-day.checked {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.calendar-day.today {
  border: 2px solid #409eff;
}

.calendar-day.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-day:not(.disabled):hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.day-number {
  font-size: 18px;
  font-weight: bold;
}

.day-status {
  margin-top: 5px;
}
</style>

